<template>
	<view>
		<u-toast ref="uToast" />
		<view v-if="loading || error" class="loading_view">
		  <u-loading mode="circle" v-if="loading && !error" size="50"></u-loading>
		  <view class="messgae">
			{{ error?'加载失败':'加载中...' }}
			<view class='message_btn' v-if="error"><u-button @click="goback">返回</u-button></view>
		  </view>
		 </view>
		<view class='box' v-else>
			<view class="box_list">
				<view class="l_head">
					<view class="img"><image :src='row.d_userIcon' @click="onImage" :data-src="row.d_userIcon"></image></view>
					<view class="cont" @click="onUser" :data-id="row.d_useId">
						<view class="c_head">
							<view class='name'>
								<text class="hg" v-if="row.d_supremeTime==1">{{row.d_userNickname}}</text>
								<text class="hy" v-else-if="row.d_memberTime==1">{{row.d_userNickname}}</text>
								<text v-else>{{row.d_userNickname}}</text>
								<image src="../../static/image/hg.png" v-if="row.d_supremeTime==1"></image>
								<image src="../../static/image/hy.png" v-else-if="row.d_memberTime==1"></image>
							</view>
							<view class='time'>{{row.d_createTime}}</view>
						</view>
						<view class="c_bot">
							<text class='age'>{{row.d_age}}岁</text>
							<text class='address'>{{row.d_addres}}</text>
						</view>
					</view>
				</view>
				<view class="l_cont">
					<view class="l_text">{{row.d_content}}</view>
					<view class="l_images" v-if="row.d_images">
						<image v-for="(v,k) in row.d_images"  @click='onImage' :data-src="v" :key="k" :src='v'></image>
					</view>
					<view class="l_tags">
						<view class="tag" v-if="row.d_topic">
							<u-tag v-for="(n,m) in row.d_topic" :key="m" :text="'#'+n+'#'" type='info' shape='circle'/>
						</view>
					</view>
				</view>
				<view class="l_num">
					<view>
						<u-icon name="thumb-up" size="50" v-if="isGood!=1" @click="onGood"></u-icon>
						<u-icon name="thumb-up-fill" size="50" v-else color="#EA4389" @click="onGood"></u-icon>
						<text :class="isGood==1?'sel':''">{{row.d_goodNum}}</text>
					</view>
					<view>
						<u-icon name="edit-pen" size="50"></u-icon>
						<text>{{row.d_commentNum}}</text>
					</view>
				</view>
			</view>
			
			<view class='comment_box'>
				<view class="c_head">评论区 ( {{row.d_commentNum}} )</view>
				
				<view v-if="comment.length>0">
				<view class="c_list" v-for="(v,k) in comment" :key="k">
					<view class='img'>
						<image :src="v.c_userIcon" @click="onImage" :data-src="v.c_userIcon"></image>
					</view>
					<view class="cont">
						<view class='head'>
							<view class='name'>
								{{v.c_userNickname}}
								<u-tag v-if="v.c_userId==row.d_useId" text="作者" type='info' size='mini' class='zz'/>
							</view>
							<view class='time'>{{v.c_createTime}}</view>
						</view>
						<view class='text'>
							{{v.c_content}}
						</view>
					</view>
				</view>
				</view>
				
				<view class="empty" v-else>
					暂时还没有评论哟~
				</view>
			</view>
			
			<view class='btn_hide'></view>
			
			<view class="comment_btn">
				<u-input placeholder="友善发言的人运气更赞哦~" v-model="c_form.cont" type='textarea' height="10" maxlength="100" :auto-height="true" :border="true"/>
				<view class='fb' @click="onComment">发表</view>
			</view>
		</view>
		
		<u-mask :show="imageShow" @click="imageShow = false">
			<view class='image'>
				<image :src="image"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:null,
				row:null,
				comment:null,
				loading:true,
				error:false,
				imageShow:false,
				image:'',
				c_form:{
					cont:''
				},
				isGood:0
			}
		},onLoad(e){
			var id=typeof(e.id);

			if(id=='undefined'){
				return uni.navigateBack({
				    delta: 1
				});
			}
			
			this.id=Number(e.id);
			
			this.onView();
		},onPullDownRefresh() {
			this.onView();
		},methods:{
			onUser(e){
				var id=e.currentTarget.dataset.id;
				
				uni.navigateTo({
				    url: '/pages/user/userInfo?id='+id
				});
			},
			onGood(){
				var that=this;
				
				this.$request({
					url:"/dynamic/good_btn",
					data:{id:this.id},
					success(res){
						if(res.data.code==1){
							that.$refs.uToast.show({
								title: '操作成功',
								type: 'success'
							});
							
							that.onView();
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type: 'warning'
							})
						}
					},fail(res){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},
			onComment(){
				var form=this.c_form;
				
				if(form.cont==''){
					return this.$refs.uToast.show({
						title: '请输入发言内容'
					})
				}
				
				var that=this;
				
				if(!this.$store.state.Authorization){
					return this.$refs.uToast.show({
						title: '你还未登录'
					});
				}
				
				form.id=this.id;
				
				var that=this;
				
				this.$request({
					url:'/dynamic/comment_btn',
					data:form,
					success(res){
						if(res.data.code==1){
							that.$refs.uToast.show({
								title: '发表成功',
								type: 'success'
							});
							
							that.c_form.cont='';
							
							that.onView();
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type: 'warning'
							})
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},
			onImage(e){
				var src=e.currentTarget.dataset.src;
				
				this.image=src;
				
				this.imageShow=true;
			},
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			},
			onView(){
				var that=this;
				
				this.$request({
					url:'/dynamic/view',
					data:{id:this.id},
					success(res){
						if(res.data.code==1){
							that.row=res.data.data.row;
							
							that.comment=res.data.data.comment;
							that.isGood=res.data.data.isGood;
							
							that.loading=false;
							
							uni.stopPullDownRefresh();
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type: 'error'
							})
							
							that.error=true;
						}
					},fail(res){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
						
						that.error=true;
					}
				})
			}
		},created(){
			
		}
	}
</script>

<style scoped src='../../static/css/dynamic.css'>
</style>
<style scoped>
	.sel{
		color: #EA4389;
	}
	.btn_hide{
		height:104rpx;
		background-color: #fff;
	}
	.comment_btn{
		background:#fff;
		width:100%;
		border:1px solid #F2F2F2;
		position:fixed;
		bottom:0;
		display:flex;
		padding:10rpx 0;
		padding-left:20rpx;
	}
	.comment_btn input{
		flex:1;
	}
	.comment_btn .fb{
		padding:20rpx 20rpx;
		color:#EA4389;
		font-size:30rpx;
	}
	.box_list .l_num view text{
		margin-left:0;
	}
	.zz{
		background:#EA4389;
		color:#fff;
		margin-left:10rpx;
	}
	.image{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.image image{
		height:650rpx;
	}
	.empty{
		font-size:30rpx;
		color:#888;
		padding:20rpx 0;
		text-align: center;
	}
	.comment_box{
		padding:20rpx;
		background-color: #fff;
		margin-top:20rpx;
	}
	.comment_box .c_head{
		padding:20rpx;
		font-size:30rpx;
		border-bottom:1px solid #f2f2f2;
	}
	.c_list{
		padding:20rpx;
		display:flex;
	}
	.border{
		border-bottom:1px solid #F2F2F2;
	}
	.c_list .img{
		width:100rpx;
		height:100rpx;
		overflow: hidden;
		border-radius: 100rpx;
	}
	.c_list .img image{
		width:100rpx;
		height:100rpx;
	}
	.c_list .cont{
		flex:1;
	}
	.c_list .cont .head{
		margin-bottom:30rpx;
		display:flex;
		justify-content:space-between;
	}
	.c_list .cont .head .name{
		color:#EA4389;
		font-size:26rpx;
		margin-left:10rpx;
	}
	.name{
		color:#EA4389;
	}
	.c_list .cont .head .time{
		color:#888;
		font-size:26rpx;
	}
	.c_list .cont .text{
		font-size:27rpx;
		margin-left:10rpx;
	}
</style>
